<template>
	<view>
		<view class="navigationBar">
			<u-navbar
			    leftText="返回"
				title="司机注册"
				@leftClick="leftClick"
				:autoBack="true"
			>
			</u-navbar>
		</view>
		<view class="container">
			<view class="registerForm">
				<u--form
					labelPosition="left"
					:model="model1"
					:rules="rules"
					ref="form1"
					labelWidth = 200rpx
				>
					<u-form-item
						label="头像"
						borderBottom
					>
						<view class="headImg" @click="img">
							<view class="uicon" v-if="headImg ==''">
								<u-icon name="camera-fill" color="#606266" size="28"></u-icon>
							</view>
							<img v-if="headImg!=''" :src="headImg">
						</view>
					</u-form-item>
					<u-form-item
						label="手机号"
						prop="userInfo.phoneNumber"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.phoneNumber"
							border="none"
						></u--input>
					</u-form-item>
					<view style="width:600rpx; display:flex">
						<view style="width:350rpx">
							<u-form-item
								label="验证码"
								borderBottom
							>
								<u--input
									v-model="verification"
									border="none"
								></u--input>
							</u-form-item>
						</view>
						<view style="margin-left:50rpx;width:200rpx" v-if="countDown == 0"><u-button type="warning" @click="sendNum">发送验证码</u-button></view>
						<view style="margin-left:50rpx;width:200rpx" v-if="countDown != 0"><u-button type="info">{{countDown}}秒后重新发送</u-button></view>
					</view>
					<u-form-item
						label="密码"
						prop="userInfo.password"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.password"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="邮箱"
						prop="userInfo.mailbox"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.mailbox"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="身份证照片"
						borderBottom
					>
						<view class="idCardImg" @click="idimg">
							<view class="uicon" v-if="idCardImg ==''">
								<u-icon name="camera-fill" color="#606266" size="28"></u-icon>
							</view>
							<img v-if="idCardImg!=''" :src="idCardImg">
						</view>
					</u-form-item>
					<u-form-item
						label="姓名"
						prop="userInfo.name"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.name"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="身份号"
						prop="userInfo.idCard"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.idCard"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="性别"
						prop="userInfo.sex"
						borderBottom
						@click="showSex = true;"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.sex"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择性别"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="行驶证照片"
						borderBottom
					>
						<view class="idCardImg" @click="drivinglicenseSrc">
							<view class="uicon" v-if="drivinglicenseImg ==''">
								<u-icon name="camera-fill" color="#606266" size="28"></u-icon>
							</view>
							<img v-if="drivinglicenseImg!=''" :src="drivinglicenseImg">
						</view>
					</u-form-item>
					<u-form-item
						label="行驶证号"
						prop="userInfo.drivinglicenseNum"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.drivinglicenseNum"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="驾驶证照片"
						borderBottom
					>
						<view class="idCardImg" @click="drivingNumSrc">
							<view class="uicon" v-if="drivingNumImg ==''">
								<u-icon name="camera-fill" color="#606266" size="28"></u-icon>
							</view>
							<img v-if="drivingNumImg!=''" :src="drivingNumImg">
						</view>
					</u-form-item>
					<u-form-item
						label="驾驶证号"
						prop="userInfo.drivingNum"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.drivingNum"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="车辆颜色"
						prop="userInfo.Colour"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.Colour"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="车辆品牌"
						prop="userInfo.brand"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.brand"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="负荷数"
						prop="userInfo.loadNum"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.loadNum"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="车牌"
						prop="userInfo.plateNumber"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.plateNumber"
							border="none"
						></u--input>
					</u-form-item>
					<u-form-item
						label="服务类型"
						prop="userInfo.ServiceType"
						borderBottom
						@click="showServiceType = true;"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.ServiceType"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择服务类型"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
				</u--form>
				<u-button type="warning" text="注册" @click="register"></u-button>
			</view>
			<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				@close="showSex = false"
				@select="sexSelect"
			>
			</u-action-sheet>
			<u-action-sheet
				:show="showServiceType"
				:actions="actions2"
				title="请选择服务类型"
				@close="showServiceType = false"
				@select="ServiceTypeSelect"
			>
			</u-action-sheet>
		</view>
		<view class="registerBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg:'', //头像照片
				idCardImg: '', //身份证照片
				drivinglicenseImg:'', //行驶证图片
				drivingNumImg: '', //驾驶证图片
				verification: '', //验证码
				countDown: 0, //倒计时
				ReturnVerification:'', //返回的验证码
				showSex: false, //性别弹窗提示
				showServiceType: false, // 服务类型弹窗提示
				model1: {
					userInfo: {
						name: '', //姓名
						sex: '',	//性别
						ServiceType: '', //服务类型
						phoneNumber: '', //手机号
						password : '', //密码
						mailbox: '', //邮箱
						idCard: '', //身份证号
						drivinglicenseNum: '', //行驶证号
						drivingNum: '',//驾驶证号
						Colour: "", //车辆颜色
						brand: "", //车辆品牌
						loadNum: "", //车辆负荷数
						plateNumber: "", //车牌
					},
				},
				actions: [
					{
						name: '男',
					},
					{
						name: '女',
					},
				],
				actions2: [
					{
						name: '快车',
					},
					{
						name: '出租车',
					},
				],
				rules: {
					'userInfo.phoneNumber': [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							pattern: /^[0-9]*$/g,
							message: '手机号码必须为数字',
							trigger: ['change','blur'],
						},
						{
							min: 11,
							max: 11,
							message: '手机号必须为11位',
							trigger: 'blur'
						},
					],
					'userInfo.name': [
						{
							type: 'string',
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						// 6-8个字符之间的判断
						{
							min: 2,
							max: 4,
							message: '长度在2-4位之间',
						},
					],
					'userInfo.password': [
						{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							message: '密码只能由数字和英文组成',
							trigger: ['change','blur'],
						},
						{
							min: 13,
							max: 16,
							message: '密码长度在13-16位之间',
							trigger: ['blur', 'change']
						},
					],
					'userInfo.mailbox': [
						{
							type: 'email',
							required: true,
							message: '请填写正确的邮箱',
							trigger: ['blur']
						},
					],
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.ServiceType': {
						type: 'string',
						max: 3,
						required: true,
						message: '请选择快车或出租车',
						trigger: ['blur', 'change']
					},
					'userInfo.idCard': [
						{
							type: 'string',
							required: true,
							message: '请填写正确的身份证号',
							trigger: ['blur']
						},
						{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/g,
							message: '请输入正确格式的身份证',
							trigger: ['change','blur'],
						},
					],
					'userInfo.drivinglicenseNum': [
						{
							type: 'string',
							required: true,
							message: '请填写行驶证号',
							trigger: ['blur']
						},
						{
							pattern: /^\d{12}$/g,
							message: '请输入12位行驶证号',
							trigger: ['change','blur'],
						},
					],
					'userInfo.drivingNum': [
						{
							type: 'string',
							required: true,
							message: '请填写驾驶证号',
							trigger: ['blur']
						},
						{
							pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/g,
							message: '请输入正确驾驶证号',
							trigger: ['change','blur'],
						},
					],
					'userInfo.Colour': [
						{
							type: 'string',
							required: true,
							message: '请填写车辆颜色',
							trigger: ['blur']
						},
						{
							pattern: /^[\u4e00-\u9fa5]{0,}$/g,
							message: '请输入正确车辆颜色',
							trigger: ['change','blur'],
						},
					],
					'userInfo.brand': [
						{
							type: 'string',
							required: true,
							message: '请填写车辆品牌',
							trigger: ['blur']
						},
						{
							pattern: /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/g,
							message: '请输入正确的车辆品牌',
							trigger: ['change','blur'],
						},
					],
					'userInfo.loadNum': [
						{
							type: 'string',
							required: true,
							message: '请填写车辆负荷数',
							trigger: ['blur']
						},
						{
							pattern: /^[0-9]*$/g,
							message: '请输入正确的负荷数',
							trigger: ['change','blur'],
						},
					],
					'userInfo.plateNumber': [
						{
							type: 'string',
							required: true,
							message: '请填写车牌',
							trigger: ['blur']
						},
						{
							pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/g,
							message: '请输入正确的车牌',
							trigger: ['change','blur'],
						},
					],
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
			// 返回登录页面
			leftClick() {
				uni.navigateTo({
				  url: '../DriverLogin/DriverLogin'
				})
			},
			// 上传头像
			img() {
				var that = this
				wx.chooseImage({
				  success (res) {
					  const tempFilePaths = res.tempFilePaths
					  wx.uploadFile({
					    url: 'http://localhost:8000/fileUpload',
					    filePath: tempFilePaths[0],
					    name: 'file',
					    formData: {
						  'user': 'test'
					    },
					    success (res){
						  const data = JSON.parse(res.data)
						  that.headImg = data.data
						  console.log(that.headImg,250);
					    }
					  })
				    }
				  })
			  },
			  // 上传身份证
			  idimg() {
			  	var that = this
			  	wx.chooseImage({
			  	  success (res) {
			  		  const tempFilePaths = res.tempFilePaths
			  		  wx.uploadFile({
			  		    url: 'http://localhost:8000/fileUpload',
			  		    filePath: tempFilePaths[0],
			  		    name: 'file',
			  		    formData: {
			  			  'user': 'test'
			  		    },
			  		    success (res){
			  			  const data = JSON.parse(res.data)
			  			  that.idCardImg = data.data
			  			  console.log(that.idCardImg,325);
			  		    }
			  		  })
			  	    }
			  	  })
			    },
			// 上传行驶证图片
			drivinglicenseSrc(){
				var that = this
				wx.chooseImage({
				  success (res) {
					  const tempFilePaths = res.tempFilePaths
					  wx.uploadFile({
					    url: 'http://localhost:8000/fileUpload',
					    filePath: tempFilePaths[0],
					    name: 'file',
					    formData: {
						  'user': 'test'
					    },
					    success (res){
						  const data = JSON.parse(res.data)
						  that.drivinglicenseImg = data.data
						  console.log(that.drivinglicenseImg,539);
					    }
					  })
				    }
				  })
			},
			// 上传驾驶证图片
			drivingNumSrc(){
				var that = this
				wx.chooseImage({
				  success (res) {
					  const tempFilePaths = res.tempFilePaths
					  wx.uploadFile({
					    url: 'http://localhost:8000/fileUpload',
					    filePath: tempFilePaths[0],
					    name: 'file',
					    formData: {
						  'user': 'test'
					    },
					    success (res){
						  const data = JSON.parse(res.data)
						  that.drivingNumImg = data.data
						  console.log(that.drivingNumImg,359);
					    }
					  })
				    }
				  })
			},
			// 性别选择
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			// 性别选择
			ServiceTypeSelect(e) {
				console.log(e);
				this.model1.userInfo.ServiceType = e.name
				this.$refs.form1.validateField('userInfo.ServiceType')
			},
			// 判断校验
			register() {
				this.$refs.form1.validate().then(res => {
					if(this.verification == this.ReturnVerification){
						if (
							  this.headImg != "" &&
							  this.idCardImg != "" &&
							  this.drivinglicenseImg != "" &&
							  this.drivingNumImg != "" &&
							  this.verification != ""
							) {
								uni.$u.toast('校验通过')
								console.log(this.model1.userInfo);
								// 发送axios
								var that = this
								uni.request({
									url: 'http://localhost:8000/driverRegister',
									data:{
									  driverPhoto: this.headImg, //头像
									  phoneNumber: this.model1.userInfo.phoneNumber, //手机号
									  driverPwd: this.model1.userInfo.password,
									  driverName: this.model1.userInfo.name,
									  driverSex: this.model1.userInfo.sex, //性别
									  driverCard: this.model1.userInfo.idCard, //身份证号
									  driverMailbox: this.model1.userInfo.mailbox, //邮箱
									  drivinglicenseNum: this.model1.userInfo.drivinglicenseNum, //行驶证
									  drivingNum: this.model1.userInfo.drivingNum, // 驾驶证
									  serviceType: this.model1.userInfo.ServiceType, //服务类型
				  
									  cardImg: this.idCardImg, //身份证图片
									  drivinglicenseImg: this.drivinglicenseImg, //行驶证图片
									  drivingImg: this.drivingNumImg, //驾驶证图片
				  
									  Colour: this.model1.userInfo.Colour, //车辆颜色
									  brand: this.model1.userInfo.brand,	// 车辆品牌
									  loadNum: this.model1.userInfo.loadNum, //负载量
									  plateNumber: this.model1.userInfo.plateNumber, //车牌
									},
									method:'GET',//get是默认 可以省略
									success:function(res){
									    console.log(res,624);
										uni.showModal({
											title: '提示',
											content: '注册成功',
											confirmText: '确定',
											cancelText:'前往登录',
											success: function (res) {
												if (res.confirm) {
													that.headImg = ''
													that.model1.userInfo.phoneNumber = ''
													that.model1.userInfo.password = ''
													that.model1.userInfo.name = ''
													that.model1.userInfo.sex = ''
													that.model1.userInfo.idCard = ''
													that.model1.userInfo.mailbox = ''
													that.model1.userInfo.drivinglicenseNum = ''
													that.model1.userInfo.drivingNum = ''
													that.model1.userInfo.ServiceType = ''
													that.idCardImg = ''
													that.drivinglicenseImg = ''
													that.drivingNumImg = ''
													that.model1.userInfo.Colour = ''
													that.model1.userInfo.brand = ''
													that.model1.userInfo.loadNum = ''
													that.model1.userInfo.plateNumber = ''
													that.verification = ''
												}else if (res.cancel) {
													uni.navigateTo({
													  url: '../DriverLogin/DriverLogin'
													})
												}
											}
										});
										
									}
								})
							}else{
								uni.showModal({
									title: '提示',
									content: '未按要求全部上传全部内容,请仔细检查',
													showCancel: false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
										}
									}
								});
							}
					}else{
						uni.showModal({
							title: '提示',
							content: '验证码错误',
											showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 发送验证码
			sendNum(){
			  if(this.model1.userInfo.phoneNumber != ''){
				let i = 60
				let that = this
				var timeFun = setInterval(() => {
								i--
								that.countDown = i
								if(i==0){
								  clearInterval(timeFun)
								}
							}, 1000);
				
				var phone = that.model1.userInfo.phoneNumber
				console.log(phone,596);
				// 发送axios
				uni.request({
					url: 'http://localhost:8000/verificationCode',
					data:{
					  phone:phone
					},
					method:'GET',//get是默认 可以省略
					success:function(res){
					  console.log(res.data.data,604);
					   that.ReturnVerification = res.data.data
					}
				})
			  }else{
				 uni.showModal({
				 	title: '提示',
				 	content: '手机号不能为空',
					showCancel: false,
				 	success: function (res) {
				 		if (res.confirm) {
				 			console.log('用户点击确定');
				 		}
				 	}
				 });
			  }
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
}
</script>

<style>
.navigationBar{
	width: 750rpx;
	height: 91px;
}
.container{
	width: 750rpx;
	height: 100%;
	display: flex;
	Justify-content: center;
}
.registerForm{
	width: 600rpx;
}
/* 上传头像选框 */
.headImg{
	width: 150rpx;
	height: 150rpx;
	border: 1px solid black;
	border-radius: 5px;
}
.idCardImg{
	width: 366.6rpx;
	height: 200rpx;
	border: 1px solid black;
	border-radius: 5px;
}
.uicon{
	width: 100%;
	height: 100%;
	display: flex;
	Justify-content: center;
}
.headImg img{
	width: 150rpx;
	height: 150rpx;
	border-radius: 5px;
}
.idCardImg img{
	width: 366.6rpx;
	height: 200rpx;
	border-radius: 5px;
}
/* 底部 */
.registerBottom{
	width: 750rpx;
	height: 50rpx;
}
</style>
